<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: center;
            height:100px;
            width:500px;
            background-color: pink;
            /* 让块级元素水平居中 */
            margin:0 auto;
            /* border边框 
              三个值： 边框粗细  边框风格  边框颜色 
              边框风格：
              solid 实线
              dotted 点线
              dashed 虚线
              double 双实线
              none 无线
            */
            /* border:10px solid red; */
            /* 不需要边框 */
            /* border:0; */
            /* border:none; */

            /* border:10px solid red; */
            /* border-width:10px;
            border-style:solid;
            border-color:red; */

            /* border:10px solid red;
            border-color:blue; */

            /* border-top border-left border-right border-bottom */
            border-top:10px solid red;
            border-left:10px dotted red;
            border-right:10px dotted red;
            border-bottom:10px dashed red;
        }
        /* body{
            font-size:0;
        } */
    </style>
</head>
<body>
    <h1>1111</h1>

    <!-- 两个图片会存在缝隙，解决：主要是浮动（后面讲） -->
    <img src="img/01.png" alt="">
    <img src="img/02.png" alt="">
</body>
</html>